<template>
  <div class="regist">
    <header>
      <a href="/loginto" class="fan"><img src="../../img/fan.png" alt=""/></a>
    </header>
    <body>
      <div class="tm">
        <h2>注册</h2>

        <!-- 输入手机号，调起手机号键盘 -->
          <form action="" method="post">

        <img src="../../img/s.png" alt="" />
        <!-- <van-field v-model="tel" type="tel" label="手机号" /> -->
        <input type="text" placeholder="手机号" >
        <span v-show="show" @click="getCode" class="ym">获取验证码</span>

        <span v-show="!show" class="count">{{ count }} s</span>

        <!-- 允许输入正整数，调起纯数字键盘 -->
        <!-- <van-field v-model="digit" type="digit" label="验证码" /> -->
       <p> <img src="../../img/sm.png" alt="" />
         <input type="text" placeholder="验证码" ></p>
        <!-- 允许输入数字，调起带符号的纯数字键盘 -->

        <!-- 输入密码 -->
        <!-- <van-field v-model="password" type="password" label="密码" />
        <van-field v-model="password" type="password" label="确认密码" /> -->
         <p> <img src="../../img/suo.png" alt="" />
         <input type="text" placeholder="密码" ></p>
         <p> <img src="../../img/d.png" alt="" />
          <input type="text" placeholder="确定密码" >
</p>
          </form>
        
        <van-form>
          <div style="margin: 16px;">
            <van-button round block type="info" @click="regist()">注册</van-button>
          </div>
        </van-form>
      </div>
    </body>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      tel: "",
      text: "",
      digit: "",
      number: "",
      password: "",
      show: true,
      count: "",
      timer: null
    };
  },
  methods: {
    regist(){
      Toast.success('注册成功');
      this.$router.push("/loginto")
    },
    getCode() {
      const TIME_COUNT = 60;

      if (!this.timer) {
        this.count = TIME_COUNT;

        this.show = false;

        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;

            clearInterval(this.timer);

            this.timer = null;
          }
        }, 1000);
      }
    }
  }
};
</script>

<style lang="scss">
@import "@css/style.scss";
* {
  box-sizing: border-box;
}
html,
body,
.login {
  width: 100%;
  height: 100%;
  
}
header {
  width: 100%;
  height: px2rem(70);

  img {
    width: 10%;
    height: px2rem(30);
    margin-top: px2rem(20);
    margin-left: px2rem(20);
  }
}
body {
  width: 100%;
  flex: 1;
}
.tm {
  width: 100%;
  height: px2rem(30);
  h2 {
    font-size: px2rem(25);
    text-align: center;
    line-height: px2rem(30);
  }
  input{
    font-size:px2rem(18);
      padding:px2rem(10);
    width:68%;
    margin-bottom:5%;
    border-radius:px2rem(4);
    margin-top:5%;
    border:none;
    border-bottom: px2rem(1) solid #ccc;
    letter-spacing:px2rem(2);
}
 img{
     width:9%;
     height:px2rem(30);
     margin-left:px2rem(7) ;
 };
 .ym{
   font-size:px2rem(14) ;
 }
}

</style>

